<template>
    <div class="page coach-page">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/training_detail_banner.jpg')">
                <span>信息详情</span>
                <p>INFORMATION DETAILS</p>
            </div>
        </div>
        <div class="content">
            <div class="training-detail-crumb">
                <a class="back-btn" href="javascript:history.back()">返回</a>
                <a>{{information.title}}</a>
            </div>
            <!-- 富文本区域 -->
            <div class="training-content">
                <div class="training-content-header">
                    <span>{{information.title}}</span>
                    <p>时间 : {{information.createTime}} </p>
                </div>
                <img class="showImgin" :src="information.showImg|filtersImg" alt="">
                <div class="training-content-text" v-html="information.content">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {informationGetOne} from '../../api/api/index.js';
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    export default {
        data() {
            return {
                information: {}
            }
        },
        created() {
            informationGetOne({
                id: this.$route.params.id
            }).then(res => {
                this.information = res.data;
                console.log(res.data);
            });
            //console.log(this.information)
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    }
</script>

<style scoped>
    @import url("./css/coachTraining.css");

    .showImgin {
        display: block;
        margin: 20px auto;
        max-width: 500px;
    }
</style>
